<template>
  <div class="container">
    <el-form :model="form" ref="formRef" label-width="120px" class="coupon-form">
      <!-- 推广渠道 -->
      <el-form-item label="推广渠道" prop="promotionChannel">
        <el-radio-group v-model="form.promotionChannel">
          <el-radio label="全网自动推广">全网自动推广</el-radio>
          <el-radio label="自有渠道推广">自有渠道推广</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 优惠券名称 -->
      <el-form-item label="优惠券名称" prop="couponName">
        <el-input v-model="form.couponName" maxlength="20" placeholder="请输入优惠券名称" />
      </el-form-item>

      <!-- 适用范围 -->
      <el-form-item label="适用范围" prop="applicableScope">
        <el-radio-group v-model="form.applicableScope">
          <el-radio label="指定商品">指定商品</el-radio>
          <el-radio label="指定商品不可用">指定商品不可用</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 优惠金额 -->
      <el-form-item label="优惠金额" prop="discountAmount">
        <el-input-number v-model="form.discountAmount" :min="1" placeholder="请输入优惠金额" />
      </el-form-item>

      <!-- 使用门槛 -->
      <el-form-item label="使用门槛" prop="usageThreshold">
        <el-radio-group v-model="form.usageThreshold">
          <el-radio label="不限制">不限制</el-radio>
          <el-radio label="满88元可使用">满88元可使用</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 发行总量 -->
      <el-form-item label="发行总量" prop="totalIssuance">
        <el-input-number v-model="form.totalIssuance" :min="1" placeholder="请输入发行总量" />
      </el-form-item>

      <!-- 每人限领 -->
      <el-form-item label="每人限领" prop="limitPerPerson">
        <el-select v-model="form.limitPerPerson" placeholder="请选择每人限领">
          <el-option label="不限张" value="unlimited"></el-option>
          <el-option label="只限3张" value="limit3"></el-option>
        </el-select>
      </el-form-item>

      <!-- 生效日期 -->
      <el-form-item label="生效日期" prop="effectiveDate">
        <el-date-picker v-model="form.effectiveDate" type="date" placeholder="选择生效日期" />
      </el-form-item>

      <!-- 到期提醒 -->
      <el-form-item label="到期提醒" prop="expiryReminder">
        <el-radio-group v-model="form.expiryReminder">
          <el-radio label="是">是</el-radio>
          <el-radio label="否">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 使用说明 -->
      <el-form-item label="使用说明" prop="usageInstructions">
        <el-input type="textarea" v-model="form.usageInstructions" rows="4" placeholder="请输入使用说明" />
      </el-form-item>

      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        promotionChannel: '',
        couponName: '',
        applicableScope: '',
        discountAmount: null,
        usageThreshold: '',
        totalIssuance: null,
        limitPerPerson: '',
        effectiveDate: '',
        expiryReminder: '',
        usageInstructions: ''
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.saveCoupon();
        } else {
          console.log('表单验证失败!');
          return false;
        }
      });
    },
    saveCoupon() {
      console.log('保存优惠券:', this.form);
      this.resetForm();
    },
    resetForm() {
      this.form = {
        promotionChannel: '',
        couponName: '',
        applicableScope: '',
        discountAmount: null,
        usageThreshold: '',
        totalIssuance: null,
        limitPerPerson: '',
        effectiveDate: '',
        expiryReminder: '',
        usageInstructions: ''
      };
    }
  }
};
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.coupon-form {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input,
.el-input-number,
.el-select,
.el-date-picker {
  width: 100%;
}

.el-button {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}
</style>
